<template>
	<view class="container">
		<!-- 导航栏 -->
		 <u-navbar
		 titleStyle ="color:#FFFFFF;font-size: 30rpx;"
		 leftIconColor="#FFFFFF"
		 bgColor="#177A77"
		            title="BOM单管理"
		            @rightClick="rightClick"
		            :autoBack="true"
		        >
		        </u-navbar>
		<!-- 搜索 -->
		<view class="search">
			<view class="v1">
				<image style="width:30rpx;height: 30rpx;" src="/static/work/ty_ss02.png" mode=""/>
				<input 
				type="text" 
				v-model="keyword" 
				placeholder="搜索BOM编码/名称/助记名/物料名称" 
				style="font-size: 24rpx;margin-left: 15rpx;flex: 1;"
				placeholder-style="color:#FFFFFF;opacity: 1;font-size:24rpx;"
				/>
				
			</view>
		</view>
		
		<!-- 信息 -->
		<view class="information">
			<scroll-view  scroll-y="true" class="scroll-Y" 
				@scrolltolower="lower" >
				<view v-if="list.length>1" class="block" v-for="(item,index) in list" :key="index">
					<view class="blockTop">
						 <view>
							<span>BOM单号:</span>
							<span style="margin-left: 10rpx;color: #999999 ;">{{item.bomCode}}</span>
						</view>
						 <view style="display: flex;align-items: center;">
							 <view style="display: flex;align-items: center;">
								 <view>名称:</view>
								 <view class="singe-line">{{item.name}}</view>
							 </view>
							 <view style="margin-left: 80rpx;">
								 <span>助记名:</span>
								 <span style="margin-left: 10rpx;color: #999999 ;">{{item.searchName}}</span>
							 </view>
						 </view>
						 <view style="display: flex;align-items: center;">
							 <view>
								 <span>类型:</span>
								 <span style="margin-left: 10rpx;color: #999999 ;">{{item.type==1?'组合':'拆分'}}</span>
							 </view>
							<view style="margin-left: 80rpx;display: flex;align-items: center;">
								<view>主物料:</view>
								<view class="singe-line">{{item.productName}}</view>
							</view>
						 </view>
					</view>
					<view class="blockBottom">
						 <view style="display: flex;align-items: center;">
							 <view style="color: #333;">创建时间:</view>
							 <view style="margin-left: 10rpx;">{{setTimes(item.createTime)}}</view>
						 </view>
						 <view class="edit">
							 <view style="display: flex;align-items: center;" @click="handleEdit(item)">
								 <image style="width: 27rpx;height: 27rpx;" src="/static/work/sc_edit.png" mode=""></image>
								 <view style="margin-left: 8rpx;">编辑</view>
							 </view>
							 <view style="display: flex;align-items: center;" @click="handeleRemove(index)">
								 <image style="width: 30rpx;height: 30rpx;" src="/static/work/sc_del.png" mode=""></image>
								 <view style="margin-left: 8rpx;">删除</view>
							 </view>
						 </view>
					</view>
				</view>
				<view v-if="list.length==0">
					<u-empty
					        mode="list"
					        icon="/static/work/nullData.png"
					>
					</u-empty>
				</view>
			</scroll-view>
		</view>
		<view class="submit">
			<u-button :loading='loading' :custom-style="customStyleBtn1" @click="submit">新增BOM单</u-button>
		</view>
		<!-- 顶部背景图 -->
		<view class="header"></view>
	</view>
</template>

<script>
	import {getBom} from '@/api/store.js'
	import {setTimes} from '@/utils/common.js'
	export default {
		data() {
			return {
				loading:false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none',
					lineHeight: '85rpx'
				},
				placeholderColor:'#FFFFFF',
				indexID: 0, //默认起始下标
				tabs: ['待入库', '已入库', '全部'],//筛选条件
				col: '#4B9C6D',//搜索框背景色
				keyword: '',//搜索信息
				list:[1,2,3,4,5],//数据
				total:0,//总条数
				queryParams:{
					pageNo: 1,//页码
					pageSize: 10,//条数
					status:20
				}
			}
		},
		onLoad() {
			this.getData()//获取BOM单列表
		},
		methods: {
			submit(){
				this.loading = true
				uni.navigateTo({
					url:'/pages/work/produce/newBom'
				})
				this.loading = false
				// setTimeout(()=>{
				// 	this.loading = false
				// },2000)
			},
			// 获取数据
			async getData(){
				let res = await getBom(this.queryParams)
				this.list = res.data
			},
			// 编辑
			handleEdit(){
				uni.navigateTo({
					url:'/pages/work/produce/newBom?id='+'123123'
				})
			},
			// 时间戳转换
			setTimes(times){
				return setTimes(times)
			},
			rightClick(){},
			// 触底加载数据
			lower(){
				// 当前数据的条数不等于总条数加载数据
				if(this.list.length!=this.total){
					this.getData()
				}
				uni.showLoading({
					title: '加载中...'
				});
				setTimeout( () =>{
					uni.hideLoading();
				}, 2000);
			},
			// 点击的 待入库 已入库 全部 TEXT
			handeleIndex(index) {
				this.indexID = index
			},
			// 搜索
			handeleSearch() {
				console.log('搜索');
			},
			// 返回上一页
			handeleGo() {
				uni.navigateBack()
			},
			// 入库详情
			handeleDetail() {
				uni.navigateTo({
					url: '/pages/work/store/storeDetail'
				})
			},
			// 删除
			handeleRemove(index){
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.list.splice(index, 1)
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.submit{
		
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 30rpx;
	}
	.singe-line {
		width: 250rpx;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    word-break: break-all;
	    white-space: nowrap;
		margin-left: 10rpx;
		color: #999999 ;
	  }
	.edit{
		width: 210rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.v1{
		width: 656rpx;
		height: 70rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 33rpx;
		
		display: flex;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		z-index: 3;
	}
	.v1 image {
	    width: 30rpx;
	    height: 30rpx;
	    /* 确保图标不受透明度影响，直接去掉透明度或给它单独设置样式 */
	    opacity: 1; /* 使图标完全不透明 */
	}

	.scroll-Y {
		width: 712rpx;
		height: calc(100vh - 550rpx);
	}

	.spans {
		color: #999999;
	}

	.bottomCen {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.bottomLeft {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.imageIcon {
		width: 24rpx;
		height: 24rpx;
	}

	.icon {
		width: 78rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.blockBottom {
		width: 100%;
		height: 90rpx;
		border-top: 1rpx solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 35rpx 0 33rpx;
		box-sizing: border-box; 
		font-size: 24rpx;
		color: #999999 ;
	}

	.blockTop {
		width: 100%;
		height: 203rpx;
		padding: 41rpx 32rpx 38rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.block {
		width: 710rpx;
		min-height: 294rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #EBEBEB;
		margin-bottom: 17rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.information {
		width: 750rpx;
		height: calc(100vh - 520rpx);
		background: #ffffff;
		border-radius: 30rpx;
		margin-top: 30rpx;
		z-index: 2;
		padding: 60rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* overflow-y: auto; */
	}

	.lines {
		width: 36rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
	}

	.line {
		width: 56rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
	}

	.all {
		width: 608rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		z-index: 2;
		margin-top: 59rpx;
	}

	.cative {
		width: 608rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 20rpx;
		margin-right: 107rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.activeo {
		width: 608rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 20rpx;
		margin-right: 107rpx;
		opacity: 0.5;
		/* 50% 透明度 */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.search {
		margin-top: 210rpx;
		margin-bottom: 30rpx;
		z-index: 10;
		width: 656rpx;
		height: 62rpx;
	}

	.nvaImage {
		width: 38rpx;
		height: 38rpx;
	}

	.navbar {
		width: 654rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 38rpx;
		z-index: 2;
	}

	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		width: 750rpx;
		height: 644rpx;
		background-color: #177A77;
		/* background: linear-gradient(0deg, #177A77, #4B9C6D); */
		position: absolute;
		top: 0;
		z-index: 1;
	}
</style>